<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-icons.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="container w">
        <!-- 头部图片展示 -->
        <!-- <header></header> -->

        <!-- 导航条 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light mynav">
            <a class="navbar-brand" href="#">
                <h2>我的博客</h1>
            </a>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link" href="#">我的大学</a>
                    <a class="nav-link" href="#">我的文章</a>
                    <a class="nav-link" href="#">我的相册</a>
                    <a class="nav-link" href="#">给我留言</a>
                </div>
            </div>
            <form class="form-inline">
                <input class="form-control mr-sm-2" type="search" placeholder="点我输入内容" aria-label="Search">
                <button class="btn btn-outline-primary" type="submit"><i class="bi bi-search"></i></button>
            </form>
        </nav>

        <!-- 轮播图 -->
        <div class="banner">

            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="5"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="./img/banner1.jpg" class="d-block w-100">
                        <div class="carousel-caption d-none d-md-block">
                            <p>如果你要为错过太阳流泪，那么你也要错过群星了。</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./img/banner2.jpg" class="d-block w-100">
                        <div class="carousel-caption d-none d-md-block">
                            <p>人生的上半场打不好没关系，还有下半场。</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./img/banner3.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <p>我来不及认真地年轻，待明白过来时，只能选择认真地老去</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./img/banner4.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <p>把脸一直向着阳光，这样就不会看到阴影</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./img/banner5.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <p>每个优秀的人，背后都有一段沉默的时光</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./img/banner6.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <p>纵使黑夜吞噬了一切，太阳还是可以重新回来</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions"
                    data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions"
                    data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </button>
            </div>

        </div>


        <!-- 主体展示 -->
        <div class="row">
            <!-- 左侧 -->
            <div class="col-3 bg-light left">
                <div class="left-top">
                </div>

                <!-- 左下 -->

                <div class="left-bottom">
                    <h4><i class="bi bi-star-fill"></i>推荐文章</h4>
                    <ul id="tab">
                        <li><a href="#"><i class="bi bi-send"></i> Android从入门到改行</a></li>
                        <li><a href="#"><i class="bi bi-send"></i> java从入门到入坟</a></li>
                        <li><a href="#"><i class="bi bi-send"></i> 数据库从删库到跑路</a></li>
                        <li><a href="#"><i class="bi bi-send"></i> c语言从入门到放弃</a></li>
                        <li><a href="#"><i class="bi bi-send"></i> js从入门到网红</a></li>
                    </ul>
                </div>
            </div>


                <!-- 右侧展示 -->
            <div class="col-9 bg-light" id="newsContainer">
                <ul class=" news info1">
                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news1.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>html网页制作实例教程</h4>
                                        <p class="card-text">随着各种网页制作工具的普及，现在不懂技术的个人也能顺利建站了。不过使用网页制作工具虽然简单，但仍有...</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news2.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>人生快不快乐看心情，幸不幸福看心态。</h4>
                                        <p class="card-text">给生命一个微笑的理由，别让心灵承载太多的负重；给自己一个取暖的方式，别让梦想在炎凉世态中幻灭。</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news3.jpg" alt="">
                                    </div>
                                    <div class="col-8">
                                        <h4>面试100文</h4>
                                        <p class="card-text"> 第一、基础很重要,不要生疏了。不管应聘什么开发岗位,基础永远是最重要的。it业不停地在炒作新...</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news4.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>jQuery你不知道的小技巧</h4>
                                        <p class="card-text">返回顶部按钮 通过使用jQuery中的animate 和scrollTop
                                            方法,不用插件就可以创建一个滚动到顶部...</p>
                                    </div>
                                </div>
                        </a></li>
                </ul>
                <ul class=" news info2">
                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news1.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>页面2</h4>
                                        <p class="card-text">随着各种网页制作工具的普及，现在不懂技术的个人也能顺利建站了。不过使用网页制作工具虽然简单，但仍有...</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news2.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>人生快不快乐看心情，幸不幸福看心态。</h4>
                                        <p class="card-text">给生命一个微笑的理由，别让心灵承载太多的负重；给自己一个取暖的方式，别让梦想在炎凉世态中幻灭。</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news3.jpg" alt="">
                                    </div>
                                    <div class="col-8">
                                        <h4>面试100文</h4>
                                        <p class="card-text"> 第一、基础很重要,不要生疏了。不管应聘什么开发岗位,基础永远是最重要的。it业不停地在炒作新...</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news4.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>jQuery你不知道的小技巧</h4>
                                        <p class="card-text">返回顶部按钮 通过使用jQuery中的animate 和scrollTop
                                            方法,不用插件就可以创建一个滚动到顶部...</p>
                                    </div>
                                </div>
                        </a></li>
                </ul>
                <ul class=" news info3">
                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news1.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>页面3</h4>
                                        <p class="card-text">随着各种网页制作工具的普及，现在不懂技术的个人也能顺利建站了。不过使用网页制作工具虽然简单，但仍有...</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news2.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>人生快不快乐看心情，幸不幸福看心态。</h4>
                                        <p class="card-text">给生命一个微笑的理由，别让心灵承载太多的负重；给自己一个取暖的方式，别让梦想在炎凉世态中幻灭。</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news3.jpg" alt="">
                                    </div>
                                    <div class="col-8">
                                        <h4>面试100文</h4>
                                        <p class="card-text"> 第一、基础很重要,不要生疏了。不管应聘什么开发岗位,基础永远是最重要的。it业不停地在炒作新...</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news4.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>jQuery你不知道的小技巧</h4>
                                        <p class="card-text">返回顶部按钮 通过使用jQuery中的animate 和scrollTop
                                            方法,不用插件就可以创建一个滚动到顶部...</p>
                                    </div>
                                </div>
                        </a></li>
                </ul>
                <ul class=" news info4">
                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news1.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>页面4</h4>
                                        <p class="card-text">随着各种网页制作工具的普及，现在不懂技术的个人也能顺利建站了。不过使用网页制作工具虽然简单，但仍有...</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news2.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>人生快不快乐看心情，幸不幸福看心态。</h4>
                                        <p class="card-text">给生命一个微笑的理由，别让心灵承载太多的负重；给自己一个取暖的方式，别让梦想在炎凉世态中幻灭。</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news3.jpg" alt="">
                                    </div>
                                    <div class="col-8">
                                        <h4>面试100文</h4>
                                        <p class="card-text"> 第一、基础很重要,不要生疏了。不管应聘什么开发岗位,基础永远是最重要的。it业不停地在炒作新...</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news4.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>jQuery你不知道的小技巧</h4>
                                        <p class="card-text">返回顶部按钮 通过使用jQuery中的animate 和scrollTop
                                            方法,不用插件就可以创建一个滚动到顶部...</p>
                                    </div>
                                </div>
                        </a></li>
                </ul>
                <ul class=" news info5">
                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news1.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>页面5</h4>
                                        <p class="card-text">随着各种网页制作工具的普及，现在不懂技术的个人也能顺利建站了。不过使用网页制作工具虽然简单，但仍有...</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news2.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>人生快不快乐看心情，幸不幸福看心态。</h4>
                                        <p class="card-text">给生命一个微笑的理由，别让心灵承载太多的负重；给自己一个取暖的方式，别让梦想在炎凉世态中幻灭。</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news3.jpg" alt="">
                                    </div>
                                    <div class="col-8">
                                        <h4>面试100文</h4>
                                        <p class="card-text"> 第一、基础很重要,不要生疏了。不管应聘什么开发岗位,基础永远是最重要的。it业不停地在炒作新...</p>
                                    </div>
                                </div>
                        </a></li>

                    <li class="news-item"> <a href="#">
                            <div class="card ">
                                <div class="card-body row">
                                    <div class="col-3">
                                        <img class="w-100" src="./img/news4.jpg" alt="">
                                    </div>
                                    <div class="col-9">
                                        <h4>jQuery你不知道的小技巧</h4>
                                        <p class="card-text">返回顶部按钮 通过使用jQuery中的animate 和scrollTop
                                            方法,不用插件就可以创建一个滚动到顶部...</p>
                                    </div>
                                </div>
                        </a></li>
                </ul>
            </div>

        </div>
        <footer>
            <h3><img src="./img/footer.jpg" alt="">版权所有©遥</h3>
        </footer>
    </div>



    </div>

    <script src="js/jquery-3.1.0.slim.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>